Day 3｜建立作品展示網站

2026 iThome 鐵人賽

DAY 3

Build on Google AI

從基礎到實作：使用 Google AI 學習程式設計系列第 3 篇

18th鐵人賽

111534008howardhsu

2026-09-17 20:23:59

38 瀏覽

分享至

開始規劃作品展示頁面

由於這次參加的是iT鐵人賽，後續預計會做出不同的作品，因此想先建立一個專門放置每日實作成果的網頁，方便之後整理與展示。
這次的目標不算複雜，先完成基本的頁首、標題、內容區塊與頁尾，之後再隨著每天的實作進度，逐步將作品加入其中。

一樣先建立 HTML 結構

這次只有簡單的做出頁首、標題以及頁尾，中間保留一大格空白區域是準備放之後的作品。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iT鐵人賽30天成果 - 作品實作張貼處</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- 頁首 -->
    <header class="site-header">
        <h1>iT鐵人賽30天成果</h1>
    </header>

    <!-- 主要內容區塊 -->
    <main class="container">
        <!-- 主要標題 -->
        <section class="intro-title">
            <h2>作品實作張貼處</h2>
        </section>

        <!-- 預留給未來新增內容的區塊 -->
        <section class="section-block">
            <!-- 之後的每日實作內容將會新增在這裡 -->
        </section>
    </main>

    <!-- 頁尾 -->
    <footer class="site-footer">
        <p>© 2026 iT 邦幫忙鐵人賽參賽作品 | Build on Google AI 挑戰中</p>
    </footer>

</body>
</html>

再設計 CSS 版面

這次頁首我請Gemini教我如何製作出漸變色，依照自己的喜好更改標題的裝飾以及頁首頁尾的顏色。
整體風格照樣以皮卡丘的顏色為主要參考，使用黃色、橘色與深咖啡色來進行調整。

/* 全局基礎設定 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", Arial, "Microsoft JhengHei", sans-serif;
    background-color: #fefce8; /* 柔和奶黃底色 */
    color: #333333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 頁首樣式：偏橘色系 */
.site-header {
    background: linear-gradient(135deg, #f4c465, #ea580c);
    text-align: center;
    padding: 25px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.site-header h1 {
    color: #ffffff;
    font-size: 1.9rem;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* 主要內容區塊容器 */
.container {
    width: 90%;
    max-width: 650px;
    margin: 40px auto;
    background-color: #ffffff;
    padding: 35px 30px;
    border-radius: 16px;
    border: 1px solid #fef08a;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    flex: 1; /* 讓頁尾自動貼在底部 */
}

/* 主標題樣式 */
.intro-title {
    text-align: center;
    margin-bottom: 20px;
}

.intro-title h2 {
    color: #c2410c;
    font-size: 1.75rem;
    position: relative;
    display: inline-block;
}

/* 標題前方的閃電裝飾 */
.intro-title h2::before {
    content: "⚡";
    color: #eab308;
    font-size: 1.5rem;
    margin-right: 8px;
    vertical-align: middle;
}

/* 未來內容放置區塊 */
.section-block {
    margin-top: 20px;
}

/* 頁尾樣式：皮卡丘尾巴深咖啡色 */
.site-footer {
    background-color: #422006;
    color: #fef08a;
    text-align: center;
    padding: 18px;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border-top: 3px solid #ca8a04;
}

第三天的成果

今天主要就為了這次活動做了這個網頁，以便我將作品展示出來。
透過這次練習，也開始思考如何將不同的作品整理在同一個網站中，而不是每次完成作品後，就各自放在不同的網頁。
接下來預計會進入到自己比較熟悉的領域，開始使用C#製作遊戲。
說實話，之前製作遊戲大多數是從教授教的程式進行改寫，很少實際使用 AI 協助開發。所以想藉此機會用Gemini協助我製作遊戲。
接下來會每天一步步進行開發，預計先從簡易的小遊戲開始，看看在AI的協助下，自己能做到什麼程度。
實作連結